<template>
  <!-- 下拉模块 -->
  <div class="cover-item">
    <img class="arc" :src="require('@/assets/cover.png')" />

    <div class="tj-sction">
      <router-link :to="{name: 'User-coupons'}">
        <div class="tj-item">
          <span class="num">{{Array.isArray(userinfo.coupons)&&userinfo.coupons.length || 0}}</span>
          <span>优惠券</span>
        </div>
      </router-link>
      <router-link :to="{name: 'User-signin', params: {type: 'collections'}}">
        <div class="tj-item">
          <span class="num">{{Array.isArray(userinfo.collections)&&userinfo.collections.length || 0}}</span>
          <span>收藏</span>
        </div>
      </router-link>
      <router-link :to="{name: 'User-signin', params: {type: 'history'}}">
        <div class="tj-item">
          <span class="num">{{Array.isArray(userinfo.history)&&userinfo.history.length || 0}}</span>
          <span>足迹</span>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "hy-cover",
  props: {
    userinfo: {
      type: Object,
      required: true
    }
  }
};
</script>

<style lang="scss" scoped>
.cover-item {
  margin-bottom: 10px;
  // 弧形图片
  .arc {
    position: absolute;
    left: 0;
    top: -17px;
    width: 100%;
    height: 18px;
  }

  // 余额,优惠券,积分等信息
  .tj-sction {
    display: flex;
    justify-content: space-around;
    align-content: center;
    background: #fff;
    border-radius: 5px;

    .tj-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 70px;
      font-size: 12px;
      color: #75787d;
      font-weight: normal;
    }

    .num {
      font-size: 16px;
      color: #303133;
      margin-bottom: 4px;
    }
  }
}
</style>
